<template>
  <div style="background-color: #42b983;display: flex;align-items: center;justify-content: center;height: 100vh;;">
    <div style="background-color: white;display: flex;width: 50%;height: 50%;overflow: hidden;border-radius: 5px">
      <div style="flex:1">
        <img src="@/assets/img/login.png" style="width: 100%">
      </div>
      <div style="flex: 1;display: flex;justify-content: center;align-items: center">
        <el-tabs v-model="activeTab" style="width: 80%">
          <el-tab-pane label="用户登录" name="student">
            <el-form style="width: 100%" :model="studentUser" :rules="studentRules" ref="studentLoginRef">

              <el-form-item prop="name">
                <el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="studentUser.name" ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="studentUser.password" show-password></el-input>
              </el-form-item>
              <el-form-item>
                <el-select v-model="studentUser.role" placeholder="请选择角色" style="width: 100%">
                  <el-option label="学生" value="STUDENT"></el-option>
                  <el-option label="教师" value="TEACHER"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="code">
                <div style="display: flex">
                  <el-input placeholder="请输入验证码" prefix-icon="el-icon-circle-check" v-model="studentUser.code" style="flex: 1"></el-input>
                  <div style="flex: 1;height: 32px">
                    <valid-code @update:value="getStudentCode"></valid-code>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" style="width: 100%" @click="studentLogin">登录</el-button>
              </el-form-item>
              <div style="display: flex">
                <div style="flex: 1">还没账号？去<span style="color: #42b983;cursor: pointer" @click="$router.push('/register')">注册</span></div>
                <div style="text-align: right;flex: 1;color: #42b983;cursor:pointer;">忘记密码</div>
              </div>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="管理员登录" name="teacher">
            <el-form style="width: 100%" :model="adminUser" :rules="adminRules" ref="adminLoginRef">
              <div style="font-weight: bold;font-size: 20px;margin-bottom: 20px">
                大学生成长成才监测平台
              </div>
              <el-form-item prop="name">
                <el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="adminUser.name"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="adminUser.password" show-password></el-input>
              </el-form-item>
              <el-form-item prop="code">
                <div style="display: flex">
                  <el-input placeholder="请输入验证码" prefix-icon="el-icon-circle-check" v-model="adminUser.code" style="flex: 1"></el-input>
                  <div style="flex: 1;height: 32px">
                    <valid-code @update:value="getAdminCode"></valid-code>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" style="width: 100%" @click="adminLogin">登录</el-button>
              </el-form-item>
              <div style="display: flex">
                <div style="flex: 1">还没账号？去<span style="color: #42b983;cursor: pointer" @click="$router.push('/register')">注册</span></div>
                <div style="text-align: right;flex: 1;color: #42b983;cursor:pointer;">忘记密码</div>
              </div>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import ValidCode from "@/components/ValidCode.vue";

export default {
  name: 'LoginView',
  components: {
    ValidCode
  },
  data() {
    //验证码校验
    const validateStudentCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'));
      } else if (value.toLowerCase() !== this.studentCode) {
        callback(new Error('验证码错误'));
      } else {
        callback();
      }
    };
    const validateAdminCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'));
      } else if (value.toLowerCase() !== this.adminCode) {
        callback(new Error('验证码错误'));
      } else {
        callback();
      }
    };
    return {
      activeTab: 'student',
      studentCode: '',
      adminCode: '',
      studentUser: {
        name: '',
        password: '',
        code: ''
      },
      adminUser: {
        name: '',
        password: '',
        code: ''
      },
      studentRules: {
        name: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
        password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
        code: [{ validator: validateStudentCode, trigger: 'blur' }]
      },
      adminRules: {
        name: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
        password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
        code: [{ validator: validateAdminCode, trigger: 'blur' }]
      }
    }
  },
  methods: {
    getStudentCode(code) {
      this.studentCode = code.toLowerCase();
    },
    getAdminCode(code) {
      this.adminCode = code.toLowerCase();
    },
    studentLogin() {
      this.$refs['studentLoginRef'].validate((valid) => {
        if (valid) {
          this.$request.post("/login", this.studentUser).then(res => {
            if (res.code === '200') {
              localStorage.setItem('honey-user', JSON.stringify(res.data));

              if (res.data.role === 'STUDENT') {
                location.href = '/student/home'
                this.$message.success('登录成功');
              } else {
                location.href = '/teacher/home'
                this.$message.success('登录成功');
              }

            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    adminLogin() {
      this.$refs['adminLoginRef'].validate((valid) => {
        if (valid) {
          this.$request.post("/adminLogin", this.adminUser).then(res => {
            if (res.code === '200') {
              this.$message.success('登录成功');
              this.$router.push('/manager/home');
              localStorage.setItem('xm-user', JSON.stringify(res.data));
            } else {
              this.$message.error(res.msg);
            }
            console.log(res);
          });
        }
      });
    }
  }
}
</script>

<style scoped>
</style>